<template>
  <div class="layout-container">
    <el-container>
      <el-aside width="200px">
        <el-menu
          default-active="1-1"
          class="el-menu-vertical">
          <el-sub-menu index="1">
            <template #title>
              <el-icon><document /></el-icon>
              <span>贷款信息</span>
            </template>
            <el-menu-item index="1-1">
              <span>客户明细</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="header-right">
            <el-dropdown @command="handleCommand">
              <span class="user-info">
                {{ username }}
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <h1>客户明细</h1>
          <div class="search-box">
            <el-input
              v-model="searchQuery"
              placeholder="请输入客户编号或客户名称"
              class="search-input"
              clearable
              @input="handleSearch"
            >
              <template #prefix>
                <el-icon><search /></el-icon>
              </template>
            </el-input>
          </div>
          <div class="customer-list">
            <table>
              <thead>
                <tr>
                  <th>客户编号</th>
                  <th>客户名称</th>
                  <th>联系电话</th>
                  <th>地址</th>
                  <th>申请金额(万)</th>
                  <th>审批额度(万)</th>
                  <th>申请进度</th>
                  <th>状态</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="customer in paginatedCustomers" :key="customer.id">
                  <td>{{ customer.id }}</td>
                  <td>{{ desensitizeName(customer.name) }}</td>
                  <td>{{ desensitizePhone(customer.phone) }}</td>
                  <td>{{ customer.address }}</td>
                  <td>{{ customer.requestAmount }}</td>
                  <td>{{ customer.progress === '已申请' ? '-' : customer.approvedAmount }}</td>
                  <td>{{ customer.progress }}</td>
                  <td>{{ customer.status }}</td>
                </tr>
              </tbody>
            </table>
            <div class="pagination-container">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="filteredCustomers.length"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { Document, ArrowDown, Search } from '@element-plus/icons-vue'

export default {
  name: 'CustomerList',
  components: {
    Document,
    ArrowDown,
    Search
  },
  data() {
    return {
      username: '',
      searchQuery: '',
      currentPage: 1,
      pageSize: 10,
      customers: [
        {
          id: '001',
          name: '王建国',
          phone: '13812345678',
          address: '北京市朝阳区',
          requestAmount: 45,
          approvedAmount: 40,
          progress: '待放款',
          status: '正常'
        },
        {
          id: '002',
          name: '李小明',
          phone: '15823456789',
          address: '上海市浦东新区',
          requestAmount: 35,
          approvedAmount: 35,
          progress: '已申请',
          status: '正常'
        },
        {
          id: '003',
          name: '张志强',
          phone: '17834567890',
          address: '广州市天河区',
          requestAmount: 50,
          approvedAmount: 45,
          progress: '待放款',
          status: '正常'
        },
        {
          id: '004',
          name: '陈晓华',
          phone: '18845678901',
          address: '深圳市南山区',
          requestAmount: 25,
          approvedAmount: 20,
          progress: '已申请',
          status: '正常'
        },
        {
          id: '005',
          name: '刘德华',
          phone: '13956789012',
          address: '杭州市西湖区',
          requestAmount: 60,
          approvedAmount: 55,
          progress: '已放款',
          status: '正常'
        },
        {
          id: '006',
          name: '赵明阳',
          phone: '15867890123',
          address: '南京市鼓楼区',
          requestAmount: 30,
          approvedAmount: 0,
          progress: '已拒绝',
          status: '拒绝'
        },
        {
          id: '007',
          name: '孙志远',
          phone: '17878901234',
          address: '成都市武侯区',
          requestAmount: 40,
          approvedAmount: 35,
          progress: '待放款',
          status: '正常'
        },
        {
          id: '008',
          name: '周建军',
          phone: '18889012345',
          address: '武汉市江汉区',
          requestAmount: 55,
          approvedAmount: 50,
          progress: '已放款',
          status: '正常'
        },
        {
          id: '009',
          name: '吴晓峰',
          phone: '13990123456',
          address: '重庆市渝中区',
          requestAmount: 45,
          approvedAmount: 0,
          progress: '已拒绝',
          status: '拒绝'
        },
        {
          id: '010',
          name: '郑宇航',
          phone: '15901234567',
          address: '西安市雁塔区',
          requestAmount: 35,
          approvedAmount: 30,
          progress: '待放款',
          status: '正常'
        },
        {
          id: '011',
          name: '黄伟东',
          phone: '17912345678',
          address: '苏州市姑苏区',
          requestAmount: 65,
          approvedAmount: 60,
          progress: '已放款',
          status: '正常'
        },
        {
          id: '012',
          name: '马云飞',
          phone: '18923456789',
          address: '天津市和平区',
          requestAmount: 40,
          approvedAmount: 35,
          progress: '待放款',
          status: '正常'
        },
        {
          id: '013',
          name: '林志勇',
          phone: '13834567890',
          address: '长沙市岳麓区',
          requestAmount: 30,
          approvedAmount: 0,
          progress: '已拒绝',
          status: '拒绝'
        },
        {
          id: '014',
          name: '王思远',
          phone: '15845678901',
          address: '青岛市市南区',
          requestAmount: 50,
          approvedAmount: 45,
          progress: '已放款',
          status: '正常'
        },
        {
          id: '015',
          name: '张雨轩',
          phone: '17856789012',
          address: '大连市中山区',
          requestAmount: 45,
          approvedAmount: 40,
          progress: '待放款',
          status: '正常'
        },
        {
          id: '016',
          name: '李天宇',
          phone: '18867890123',
          address: '厦门市思明区',
          requestAmount: 55,
          approvedAmount: 50,
          progress: '已放款',
          status: '正常'
        },
        {
          id: '017',
          name: '陈明亮',
          phone: '13978901234',
          address: '济南市历下区',
          requestAmount: 35,
          approvedAmount: 0,
          progress: '已拒绝',
          status: '拒绝'
        },
        {
          id: '018',
          name: '刘俊杰',
          phone: '15989012345',
          address: '福州市鼓楼区',
          requestAmount: 40,
          approvedAmount: 35,
          progress: '待放款',
          status: '正常'
        },
        {
          id: '019',
          name: '赵子豪',
          phone: '17990123456',
          address: '郑州市金水区',
          requestAmount: 60,
          approvedAmount: 55,
          progress: '已放款',
          status: '正常'
        },
        {
          id: '020',
          name: '孙浩然',
          phone: '18901234567',
          address: '合肥市蜀山区',
          requestAmount: 45,
          approvedAmount: 40,
          progress: '待放款',
          status: '正常'
        },
        {
          id: '021',
          name: '周子涵',
          phone: '13712345678',
          address: '南昌市东湖区',
          requestAmount: 30,
          approvedAmount: 0,
          progress: '已拒绝',
          status: '拒绝'
        },
        {
          id: '022',
          name: '吴宇轩',
          phone: '15723456789',
          address: '石家庄市长安区',
          requestAmount: 50,
          approvedAmount: 45,
          progress: '已放款',
          status: '正常'
        },
        {
          id: '023',
          name: '郑晓峰',
          phone: '17834567890',
          address: '太原市小店区',
          requestAmount: 40,
          approvedAmount: 35,
          progress: '待放款',
          status: '正常'
        },
        {
          id: '024',
          name: '黄志远',
          phone: '18845678901',
          address: '贵阳市南明区',
          requestAmount: 55,
          approvedAmount: 50,
          progress: '已放款',
          status: '正常'
        },
        {
          id: '025',
          name: '马天宇',
          phone: '13956789012',
          address: '海口市龙华区',
          requestAmount: 35,
          approvedAmount: 0,
          progress: '已拒绝',
          status: '拒绝'
        },
        {
          id: '026',
          name: '林子豪',
          phone: '15967890123',
          address: '昆明市五华区',
          requestAmount: 45,
          approvedAmount: 40,
          progress: '待放款',
          status: '正常'
        },
        {
          id: '027',
          name: '王浩宇',
          phone: '17978901234',
          address: '兰州市城关区',
          requestAmount: 60,
          approvedAmount: 55,
          progress: '已放款',
          status: '正常'
        },
        {
          id: '028',
          name: '张俊杰',
          phone: '18989012345',
          address: '银川市兴庆区',
          requestAmount: 40,
          approvedAmount: 35,
          progress: '待放款',
          status: '正常'
        },
        {
          id: '029',
          name: '李明阳',
          phone: '13890123456',
          address: '西宁市城中区',
          requestAmount: 30,
          approvedAmount: 0,
          progress: '已拒绝',
          status: '拒绝'
        },
        {
          id: '030',
          name: '陈志强',
          phone: '15801234567',
          address: '呼和浩特市回民区',
          requestAmount: 50,
          approvedAmount: 45,
          progress: '已放款',
          status: '正常'
        },
        {
          id: '031',
          name: '刘子涵',
          phone: '17912345678',
          address: '乌鲁木齐市天山区',
          requestAmount: 45,
          approvedAmount: 40,
          progress: '待放款',
          status: '正常'
        },
        {
          id: '032',
          name: '赵浩然',
          phone: '18923456789',
          address: '拉萨市城关区',
          requestAmount: 55,
          approvedAmount: 50,
          progress: '已放款',
          status: '正常'
        }
      ]
    }
  },
  computed: {
    filteredCustomers() {
      if (!this.searchQuery) return this.customers;
      const query = this.searchQuery.toLowerCase();
      return this.customers.filter(customer => 
        customer.id.toLowerCase().includes(query) ||
        customer.name.toLowerCase().includes(query)
      );
    },
    paginatedCustomers() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredCustomers.slice(start, end);
    }
  },
  methods: {
    handleCommand(command) {
      if (command === 'logout') {
        localStorage.removeItem('userInfo');
        this.$router.push('/login');
      }
    },
    handleSearch() {
      this.currentPage = 1;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    desensitizeName(name) {
      if (name.length <= 1) return name;
      return name[0] + '*'.repeat(name.length - 1);
    },
    desensitizePhone(phone) {
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    }
  },
  created() {
    const userInfo = localStorage.getItem('userInfo');
    if (!userInfo) {
      this.$router.push('/login');
      return;
    }
    const parsedUserInfo = JSON.parse(userInfo);
    this.username = parsedUserInfo.username;
  }
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.el-container {
  height: 100%;
}

.el-aside {
  background-color: #f5f7fa;
  color: #2c3e50;
}

.el-menu-vertical {
  border-right: none;
  background-color: #f5f7fa;
  padding: 16px 0;
}

.el-sub-menu__title {
  font-size: 16px;
  padding: 0 20px;
  height: 56px;
  line-height: 56px;
  color: #2c3e50;
}

.el-sub-menu__title:hover {
  color: #409EFF;
  background-color: #ecf5ff;
}

.el-menu-item {
  color: #2c3e50;
  font-size: 16px;
  padding: 0 20px;
  height: 56px;
  line-height: 56px;
  margin: 4px 0;
}

.el-menu-item:hover {
  color: #409EFF;
  background-color: #ecf5ff;
}

.el-menu-item.is-active {
  color: #409EFF;
  font-weight: 500;
  background-color: #ecf5ff;
}

.el-header {
  background-color: white;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 60px;
  padding: 0 20px;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  font-size: 15px;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.user-info:hover {
  color: #409EFF;
}

.el-main {
  background-color: #f0f2f5;
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.search-box {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
}

.search-input {
  width: 360px;
  transition: all 0.3s ease;
}

.search-input :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6;
  border-radius: 4px;
  padding: 1px 11px;
}

.search-input :deep(.el-input__wrapper):hover {
  box-shadow: 0 0 0 1px #c0c4cc;
}

.search-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409EFF;
}

.search-input :deep(.el-input__inner) {
  height: 36px;
  font-size: 14px;
}

.search-input :deep(.el-input__prefix) {
  color: #909399;
  font-size: 16px;
}

.customer-list {
  background: white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

th {
  background-color: #f8f9fa;
  font-weight: 600;
  font-size: 15px;
  color: #333;
}

td {
  font-size: 14px;
  color: #444;
}

tr:hover {
  background-color: #f5f7fa;
}

.pagination-container {
  padding: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>